<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PET SPA</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
    rel="stylesheet">
  <link href="./css/reset.css" rel="stylesheet">
  <link href="./css/main.css" rel="stylesheet">

</head>

<body>
  <header class="header">
    <div class="container">

      <nav class="nav">
        <div class="nav__row">
          <div class="nav__list">
            <ul class="nav-list">
              <li class="nav-list__item">
                <a class="nav-list__link" href="#">Home</a>
              </li>
              <li class="nav-list__item">
                <a class="nav-list__link" href="#">About</a>
              </li>
              <li class="nav-list__item">
                <a class="nav-list__link" href="#">Services</a>
              </li>
              <li class="nav-list__item">
                <a class="nav-list__link" href="#">Contact</a>
              </li>
            </ul>
          </div>

          <div class="nav__logo">
            <img class="logo" src="./img/logo.svg" alt="Pawfections">
          </div>

          <div class="nav__btn">
            <a class="btn" href="#">book</a>
          </div>
        </div>
      </nav>

      <div class="header__grid">

        <div class="header__round-text">
          <img src="./img/header/image33.png" srcset="./img/header/image33@2x.png" alt="Where your is our priority">
        </div>

        <div class="header__col">
          <p class="scroll-text scroll-text--bullet-left">Scroll to discover</p>
        </div>

        <div class="header__content">

          <div class="header__img-wrap">

            <div class="header__img">
              <p class="header__title header__title--img">
                Woof!<br>Doggie Wash
              </p>

              <img src="./img/header/main-img.jpg" srcset="./img/header/main-img@2x.jpg" alt="Dog">
            </div>

            <h1 class="header__title header__title--black">
              Woof!<br>Doggie Wash
            </h1>
          </div>

          <p class="header__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque augue eros, pellentesque nec tempor eu,
            sollicitudin at dolor. Cras commodo venenatis diam, nec venenatis massa auctor at.
          </p>
        </div>

        <div class="header__col">
          <p class="scroll-text scroll-text--bullet-right">Scroll to discover</p>
        </div>
      </div>
    </div>

  </header>

  <main class="main">
    <section class="our-attitude">
      <div class="container container--small">
        <div class="our-attitude__row">
          <div class="our-attitude__col">

            <h2 class="our-attitude__title">
              We treat your pet as a family member
            </h2>

            <div class="our-attitude__text">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque augue eros, pellentesque nec tempor eu,
                sollicitudin at
                dolor. Cras commodo venenatis diam, nec venenatis massa auctor at.
              </p>
            </div>

            <div class="our-attitude__btn">
              <a class="btn" href="#">Discover</a>
            </div>
          </div>

          <div class="our-attitude__col">
            <div class="our-attitude__img-wrap">
              <img class="our-attitude__img" src="./img/our/washing-pet-dog-home2.jpg"
                srcset="./img/our/washing-pet-dog-home@2x.jpg" alt="Your pet">
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="services">
      <div class="container container--small-2">
        <div class="services__grid">
          <div class="services__card card">
            <img class="card__img-1" src="./img/pets/cat-1.png" srcset="./img/pets/cat-1@2x.png" alt="Cat-1">
            <h3 class="card__title">
              Pawdicure
            </h3>
          </div>

          <div class="services__card card">
            <img class="card__img-2" src="./img/pets/cat-2.png" srcset="./img/pets/cat-2@2x.png" alt="Cat-2">
            <h3 class="card__title">
              Spa Baths
            </h3>
          </div>

          <div class="services__card card">
            <img class="card__img-3" src="./img/pets/cat-3.png" srcset="./img/pets/cat-3@2x.png" alt="Cat-3">
            <h3 class="card__title">
              Haircut of Choice
            </h3>
          </div>
        </div>
      </div>
    </section>

    <section class="pets">
      <div class="container">
        <div class="pets__grid">
          <div class="pets__col"></div>
        </div>
      </div>
    </section>
  </main>

</body>

</html>